<template>
    <div>
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :key="city" :label="city" @click="displayLevel">{{
                    city
            }}</el-checkbox>
        </el-checkbox-group>

        <!-- 弹出 -->
        <div class="cascade" ref="cascade" style="{left:'213px', top: '127px' }" v-if="dialogTableVisible">
            <div class="left">
                <el-input class="inputBox" size="large" placeholder="请搜索市区" :suffix-icon="Search" />

            </div>
            <div class="right">
                <div class="city">
                    <el-checkbox :label="3">上海(0/16)</el-checkbox>
                    <div>></div>
                </div>
                <div>
                    <el-checkbox class="choice" label="黄埔区" size="large" />
                    <br>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const checkAll = ref(false)
const dialogTableVisible = ref(false)
const isIndeterminate = ref(true)
const cascade = ref(null)
const left = ref(0)
const top = ref(0)
const checkedCities = ref(['上海', '北京'])
const cities = ['上海', '北京', '广州', '深圳']

const handleCheckAllChange = (val) => {
    checkedCities.value = val ? cities : []
    isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === cities.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
const displayLevel = (e) => {
    left.value = e.clientX
    top.value = e.clientY
    console.log('触发', left.value, top.value);
    // console.log(cascade.value);
    dialogTableVisible.value = true
}
</script>

<style lang="scss" scoped>
.cascade {
    width: 440px;
    height: 300px;
    border: 1px solid red;
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 0;

    .left {
        .inputBox {
            width: 200px;
        }
    }

    .right {
        width: 100%;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;

        .city {
            width: 200px;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;

            div {
                font-size: 20px;
                padding-right: 5px;
            }
        }

        .choice {
            width: 200px;
        }
    }
}
</style>